// pages/home/home.js

/* 首页 */

var wxCharts = require('../../utils/wxcharts.js');
var wxMoment = require("../../utils/moment.js");
var wxNetwork = require("../../utils/network.js");
var wxURL = require("../../utils/requestURL.js");

var dayBarChart = null;
var dayXCharts = new Array();
var dayYCharts = new Array();

var monthBarChart = null;
var monthXCharts = new Array();
var monthYCharts = new Array();

var customLineChart = null;
var customXCharts = new Array();
var customYCharts = new Array();

var alarmBarChart = null;
var alarmXCharts = new Array();
var alarmYCharts = new Array();

var dayChartData = {
  dayChartsArray: [{
      date: '2018-11-30',
      value: 0
    },
    {
      date: '2018-12-01',
      value: 0.30
    },
    {
      date: '2018-12-02',
      value: 3.68
    },
    {
      date: '2018-12-03',
      value: 0.29
    },
    {
      date: '2018-12-04',
      value: 0.31
    },
    {
      date: '2018-12-05',
      value: 0.32
    }
  ],
  monthChartsArray: [{
      date: '1',
      value: 10.38
    },
    {
      date: '2',
      value: 8.95
    },
    {
      date: '3',
      value: 9.55
    },
    {
      date: '4',
      value: 8.29
    },
    {
      date: '5',
      value: 9.85
    },
    {
      date: '6',
      value: 0.52
    },
    {
      date: '7',
      value: 10.62
    },
    {
      date: '8',
      value: 9.79
    },
    {
      date: '9',
      value: 10.28
    },
    {
      date: '10',
      value: 7.65
    },
    {
      date: '11',
      value: 9.13
    },
    {
      date: '12',
      value: 1.54
    }
  ],
  customChartsArray: [{
      date: '01:00',
      value: 0.1
    },
    {
      date: '02:00',
      value: 0
    },
    {
      date: '03:00',
      value: 0
    },
    {
      date: '04:00',
      value: 0
    },
    {
      date: '05:00',
      value: 0
    },
    {
      date: '06:00',
      value: 0.5
    },
    {
      date: '07:00',
      value: 0.8
    },
    {
      date: '08:00',
      value: 0
    },
    {
      date: '09:00',
      value: 0
    },
    {
      date: '10:00',
      value: 0
    },
    {
      date: '11:00',
      value: 2
    },
    {
      date: '12:00',
      value: 1
    },
    {
      date: '13:00',
      value: 0.3
    },
    {
      date: '14:00',
      value: 0
    },
    {
      date: '15:00',
      value: 0
    },
    {
      date: '16:00',
      value: 0
    },
    {
      date: '17:00',
      value: 0
    },
    {
      date: '18:00',
      value: 2
    },
    {
      date: '19:00',
      value: 1.5
    },
    {
      date: '20:00',
      value: 4
    },
    {
      date: '21:00',
      value: 0.6
    },
    {
      date: '22:00',
      value: 0.3
    },
    {
      date: '23:00',
      value: 0
    },
    {
      date: '24:00',
      value: 0
    }
  ],
  alarmChartsArray: [{
      date: '10:00',
      value: 80
    },
    {
      date: '11:00',
      value: 90
    },
    {
      date: '12:00',
      value: 100
    },
    {
      date: '13:00',
      value: 98
    },
    {
      date: '14:00',
      value: 96
    }
  ]

};

Page({
  data: {
    autoplay: false,

    waterUsersArray: [], //接口中获取到的用水户
    userInfoArray: [], //整合后用户信息array
    currentUsersIndex: 0, //当前用户的

    currentMessage:'',

    tabs: ['日', '月', '年', '自定义'],
    currentTabIndex: 0,

    dayStartDate: '', //日-开始时间
    dayEndDate: '', //日-结束时间
    defaultDay: '', //默认的当前日期的前一天，做判断用

    monthDate: '', //月-时间
    yearDate: '', //年-时间
    defaultYear: '', //默认的当前年份，做判断用

    customDate: '' //自定义-时间
  },

  onLoad: function(options) {

    var that = this;

    /* 设置时间 */
    that.setData({
      dayStartDate: wxMoment(new Date()).add(-8, 'day').format('YYYY-MM-DD'),
      dayEndDate: wxMoment(new Date()).add(-1, 'day').format('YYYY-MM-DD'),
      defaultDay: wxMoment(new Date()).add(-1, 'day').format('YYYY-MM-DD'),

      monthDate: wxMoment(new Date()).format('YYYY'),
      yearDate: wxMoment(new Date()).format('YYYY'),
      defaultYear: wxMoment(new Date()).format('YYYY'),

      customDate: wxMoment(new Date()).add(-1, 'day').format('YYYY-MM-DD')
    })
  },

  onShow: function() {
    
    var that = this;

    that.getUserInfo();
    that.getChartsData();
  },

  /* 获取用户信息 */
  getUserInfo: function() {

    var that = this;

    var header = {'Access-Token': wx.getStorageSync('token')};
    wxNetwork.getRequest(wxURL.get_queryUsers_URL, {}, header, function(dict) {

        var newArray = [{
          userId: '00',
          waterUserType: '新增用户',
          isAdd: '1',
          alramMessage:[],
          wxAppMessage:[]
        }]
        var waterUsers = dict.content.waterUsers;

        that.setData({
          userInfoArray: waterUsers.concat(newArray)
        })

        that.getMessageData();
      },
      function(dict) {

      },
      function(dict) {

      })
  },

   /* 获取最新消息 */
  getMessageData:function(){

    var that = this;
    var result = [];
    var messageData = that.data.userInfoArray[0];
    
    for (var i = 0; i < messageData.alramMessage.length; i++) {
      var obj = messageData.alramMessage[i];
      result.push({
        "messageName": obj.alarmTypeName,
        "messageContent": obj.alarmCodeName,
        "messageTime": obj.dtarStarTime
      });
    }

    for (var i = 0; i < messageData.wxAppMessage.length; i++) {
      var obj = messageData.wxAppMessage[i];
      result.push({
        "messageName": obj.messageName,
        "messageContent": obj.messageContent,
        "messageTime": obj.messageTime
      });
    }

    //时间倒叙
    var rows = result;
    rows.sort(function (a, b) {
      return Date.parse(b.messageTime) - Date.parse(a.messageTime);
    });

    that.setData({
      currentMessage: rows[0].messageName
    })
  },

  /* 实现用户类型的中间凸显图片的样式 */
  swiperChange: function(e) {

    var that = this;
    that.setData({
      currentUsersIndex: e.detail.current
    })
   
    //获取最新消息
    var result = [];
    var messageData = that.data.userInfoArray[that.data.currentUsersIndex];

    for (var i = 0; i < messageData.alramMessage.length; i++) {
      var obj = messageData.alramMessage[i];
      result.push({
        "messageName": obj.alarmTypeName,
        "messageContent": obj.alarmCodeName,
        "messageTime": obj.dtarStarTime
      });
    }

    for (var i = 0; i < messageData.wxAppMessage.length; i++) {
      var obj = messageData.wxAppMessage[i];
      result.push({
        "messageName": obj.messageName,
        "messageContent": obj.messageContent,
        "messageTime": obj.messageTime
      });
    }

    //时间倒叙
    var rows = result;
    rows.sort(function (a, b) {
      return Date.parse(b.messageTime) - Date.parse(a.messageTime);
    });


    if (rows.length == 0)
    {
      that.setData({
        currentMessage:''
      })
    }
    else
    {
      that.setData({
        currentMessage: rows[0].messageName
      })
    }
  },

  /* 头像是否有新增 */
  imageClickEvent: function() {

    var that = this;
    var fir = that.data.userInfoArray[that.data.currentUsersIndex];

    var isAdd = fir.isAdd;
    if (isAdd == '1') {
      wx.navigateTo({
        url: '../userIdent/userIdent'
      })
    } else {
      wx.navigateTo({
        url: '../userInfo/userInfo?detail=' + JSON.stringify(fir)
      })
    }
  },

  /* 是否到消息列表 */
  alarmClickEvent: function() {
    var fir = this.data.userInfoArray[this.data.currentUsersIndex];
    var isAdd = fir.isAdd;
    if (isAdd == '0') {
      wx.navigateTo({
        url: '../message/message?message=' + JSON.stringify(fir)
      })
    }
  },

  /* 实现选项卡 */
  changeItem: function(e) {

    var that = this;

    that.setData({
      currentTabIndex: e.target.dataset.id
    });

    if (this.data.currentTabIndex == 0) {
      this.showDayBar();
    }
    if (this.data.currentTabIndex == 1) {
      this.showMonthBar();
    }
    if (this.data.currentTabIndex == 3) {
      this.showCustomLine();
    }
  },

  /* 日选择日期 */
  lastCilck: function() {

    var that = this;

    that.setData({
      dayEndDate: wxMoment(this.data.dayStartDate).format('YYYY-MM-DD'),
      dayStartDate: wxMoment(this.data.dayStartDate).add(-7, 'day').format('YYYY-MM-DD')
    })
  },
  nextCilck: function() {

    var that = this;

    if (this.data.dayEndDate >= this.data.defaultDay) {
      wx.showModal({
        title: '提示',
        content: '已经是最大日期了',
      })
    } else {
      that.setData({
        dayStartDate: wxMoment(this.data.dayEndDate).format('YYYY-MM-DD'),
        dayEndDate: wxMoment(this.data.dayEndDate).add(7, 'day').format('YYYY-MM-DD')
      })
    }
  },

  /* 月选择日期 */
  monthDateChange: function(e) {

    var that = this;

    that.setData({
      monthDate: e.detail.value,
    })
  },

  /* 年选择日期 */
  yearDateChange: function(e) {

    var that = this;

    that.setData({
      yearDate: e.detail.value,
    })
  },

  /* 自定义选择 */
  customDateChange: function(e) {

    var that = this;

    that.setData({
      customDate: e.detail.value,
    })
  },

  onReady: function(e) {
    this.showDayBar();
    this.showMonthBar();
    this.showCustomLine();
  },

  /* 图表数据处理 */
  getChartsData: function() {
    var dayUsed = dayChartData.dayChartsArray;
    for (var i = 0; i < dayUsed.length; i++) {
      dayXCharts[i] = dayUsed[i].date;
      dayYCharts[i] = dayUsed[i].value;
    }

    var monthUsed = dayChartData.monthChartsArray;
    for (var i = 0; i < monthUsed.length; i++) {
      monthXCharts[i] = monthUsed[i].date;
      monthYCharts[i] = monthUsed[i].value;
    }

    var customUsed = dayChartData.customChartsArray;
    for (var i = 0; i < customUsed.length; i++) {
      customXCharts[i] = customUsed[i].date;
      customYCharts[i] = customUsed[i].value;
    }
  },

  /* 日用水量 */
  showDayBar: function() {
    var res = wx.getSystemInfoSync();
    var windowWidth = res.windowWidth - 8;

    dayBarChart = new wxCharts({
      canvasId: 'dayColumnCanvas',
      width: windowWidth, //宽度单位为px
      height: 180, //高度单位为px
      background: '#efeff4', //背景颜色
      type: 'column',
      animation: true,
      categories: dayXCharts, //x轴数据
      legend: false, //是否显示图表下方各类别的标识
      animation: true, //是否动画展示
      dataLabel: true, //是否在图表中显示数据内容值
      dataPointShape: true, //是否在图表中显示数据点图形标识

      extra: {
        column: {
          width: 15 //柱形宽度
        }
      },

      //数据列表
      series: [{
        name: '用水量', //数据名称
        data: dayYCharts, //数据
        color: '#52a1e1', //数据颜色

        //定义显示数据内容
        format: function(val, name) {
          return val.toFixed(2) + '';
        }
      }],

      xAxis: {
        disableGrid: true,
        gridColor: '#ffffff',
        fontColor: '#0b0c0c',
      },

      yAxis: {
        title: '',
        fontColor: '#666666', //网格颜色
        gridColor: '#ffffff', //数据点颜色
        format: function(val) {
          return val.toFixed(1); //y轴显示1位小数
        }
      }
    })
  },

  /* 月用水量 */
  showMonthBar: function() {
    var res = wx.getSystemInfoSync();
    var windowWidth = res.windowWidth - 8;

    monthBarChart = new wxCharts({
      canvasId: 'monthColumnCanvas',
      width: windowWidth, //宽度单位为px
      height: 180, //高度单位为px
      background: '#efeff4', //背景颜色
      type: 'column',
      animation: true,
      categories: monthXCharts, //x轴数据
      legend: false, //是否显示图表下方各类别的标识
      animation: true, //是否动画展示
      dataLabel: true, //是否在图表中显示数据内容值
      dataPointShape: true, //是否在图表中显示数据点图形标识

      extra: {
        column: {
          width: 15
        }
      },

      //数据列表
      series: [{
        name: '用水量', //数据名称
        data: monthYCharts,
        color: '#52a1e1',

        //定义显示数据内容
        format: function(val, name) {
          return val.toFixed(2) + '';
        }
      }],

      xAxis: {
        disableGrid: true,
        gridColor: '#ffffff',
        fontColor: '#0b0c0c',
      },

      yAxis: {
        title: '',
        fontColor: '#666666', //网格颜色
        gridColor: '#ffffff', //数据点颜色
        format: function(val) {
          return val.toFixed(1); //y轴显示1位小数
        }
      }
    })
  },

  /* 自定义 */
  showCustomLine: function() {
    var res = wx.getSystemInfoSync();
    var windowWidth = res.windowWidth - 8;

    customLineChart = new wxCharts({
      canvasId: 'customLineCanvas',
      width: windowWidth, //宽度单位为px
      height: 180, //高度单位为px
      background: '#efeff4', //背景颜色
      type: 'line', //图表类型
      categories: customXCharts,
      legend: false, //是否显示图表下方各类别的标识
      animation: true, //是否动画展示
      dataLabel: false, //是否在图表中显示数据内容值
      dataPointShape: true, //是否在图表中显示数据点图形标识

      //其他非通用配置项
      extra: {
        lineStyle: 'straight' //直线
      },

      //数据列表
      series: [{
        name: '用水量', //数据名称
        data: customYCharts,
        color: '#52a1e1',

        //定义显示数据内容
        format: function(val, name) {
          return val.toFixed(2) + '';
        }
      }],

      xAxis: {
        disableGrid: true, //不绘制X轴网格
        gridColor: '#000000',
        fontColor: '#0b0c0c',
      },

      yAxis: {
        title: '',
        fontColor: '#666666', //网格颜色
        gridColor: '#ffffff', //数据点颜色
        format: function(val) {
          return val.toFixed(1); //y轴显示1位小数
        }
      }
    })
  }

})